<template>
    <div class="custom-popover-class-spread-box" v-click-outside="onClickOutside">
        <!-- 推广 -->
        <div class="spread-header">
            推广
            <el-icon class="spread-header-icon" @click="handleClose()"><Close /></el-icon>
        </div>
        <div class="custom-preview">
            <el-radio-group class="custom-preview-radio" v-model="spreadRadio" @change="handleSpreadChange">
                <el-radio-button label="1">二维码</el-radio-button>
                <el-radio-button label="2">链接</el-radio-button>
            </el-radio-group>
            <el-image
                title="点击预览"
                placeholder="加载中..."
                class="custom-preview-image"
                v-if="spreadRadio == 1"
                :src="codeUrl"
                :preview-teleported="true"
                :preview-src-list="[codeUrl]"
                fit="cover">
                <template #error>
                    <div class="custom-img-error-box">加载中...</div>
                </template>
            </el-image>
            <template v-if="spreadRadio == 2">
                <div class="custom-preview-title" style="padding-top: 0">小程序短链</div>
                <el-input
                    class="custom-preview-input"
                    :class="{ 'btn-disabled-input': !shortLink }"
                    v-model="shortLink"
                    placeholder="短链生成中..."
                    readonly>
                    <template #append>
                        <div :class="{ 'btn-disabled': !shortLink }" @click="handleCopy(shortLink)">复制</div>
                    </template>
                </el-input>
                <div class="custom-preview-title">页面路径</div>
                <el-input
                    class="custom-preview-input custom-preview-input-url"
                    :class="{ 'btn-disabled-input': !url }"
                    v-model="url"
                    placeholder=""
                    readonly>
                    <template #append>
                        <div :class="{ 'btn-disabled': !url }" @click="handleCopy(url)">复制</div>
                    </template>
                </el-input>
            </template>
        </div>
        <div class="spread-footer" v-if="spreadRadio == 1">
            <el-button :disabled="!codeUrl" type="primary" @click="handleDownload()">下载</el-button>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import useClipboard from 'vue-clipboard3';
import { ElMessage } from 'element-plus';
import { downloadImgHandler } from '@/commons/utils';
import { getMiniAppQrcodeHook } from '@/hooks';
import { ClickOutside as vClickOutside } from 'element-plus';

const props = defineProps({
    // 小程序路径
    path: {
        type: String,
        default: ''
    },
    // 小程序路径参数
    params: {
        type: String,
        default: ''
    },
    // 下载名称
    downloadName: {
        type: String,
        default: ''
    },
    // 传入的方法
    popoverFn: {
        type: Function,
        default: () => {}
    },
    // 短链前缀
    shortPrefix: {
        type: String,
        default: ''
    },
    // 小程序标题
    shortTitle: {
        type: String,
        default: null
    }
});

const url = computed(() => {
    if (!props.path) {
        return '';
    }
    if (props.params) {
        return '/' + props.path + '?' + props.params;
    }
    return '/' + props.path;
});

const handleClose = () => {
    props.popoverFn();
};

// 点击popover外部
const onClickOutside = el => {
    props.popoverFn();
};

let spreadRadio = ref('1');
const handleSpreadChange = val => {
    if (!shortLink.value && val == 2) {
        getMiniAppQrcode(val);
    }
};

let codeUrl = ref('');
let shortLink = ref('');
const handleCopy = async url => {
    // 复制
    if (!url) {
        return;
    }
    const { toClipboard } = useClipboard();
    try {
        await toClipboard(url);
        ElMessage.success('复制成功');
    } catch (e) {}
};
const handleDownload = () => {
    // 下载
    downloadImgHandler(codeUrl.value, props.downloadName || '未命名' + '_推广码');
};

const getMiniAppQrcode = async type => {
    const mode = type == 1 ? 'qrcode' : 'link';
    const res = await getMiniAppQrcodeHook(props.path, props.params, type, mode);
    if (type == 1) {
        codeUrl.value = res?.data?.url;
    } else {
        shortLink.value = res?.data?.shortLink;
    }
};

onMounted(() => {
    getMiniAppQrcode(1);
});
</script>

<style lang="scss">
.custom-popover-class-spread-box {
    padding: 0 !important;
    border-radius: 10px;
    .spread-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 50px;
        border-bottom: 1px solid #eaeaea;
        padding: 0 24px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #33302d;
        &-icon {
            color: #a9a9a9;
            cursor: pointer;
        }
    }
    .custom-preview {
        padding: 24px;
        display: flex;
        flex-direction: column;
        &-radio {
            padding-bottom: 24px;
        }
        &-image {
            width: 140px;
            height: 140px;
        }
        &-title {
            padding: 24px 0 16px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #33302d;
        }
        &-input {
            &-url {
                margin-bottom: 32px;
            }
            .el-input__wrapper {
                margin-right: 8px;
                background: #f2f2f2;
                border-radius: 4px;
                border: 1px solid #eaeaea;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #33302d;
                box-shadow: none;
            }
            .el-input-group__append {
                padding: 0;
                background: #ffffff;
                border-radius: 4px;
                border: 1px solid #ff6b00;
                box-shadow: none;
                & > div {
                    padding: 0 12px;
                    cursor: pointer;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #ff6b00;
                }
                .btn-disabled {
                    color: rgba(255, 181, 128, 0.8);
                    cursor: not-allowed;
                    background-image: none;
                }
            }
        }
        .btn-disabled-input {
            .el-input-group__append {
                border: 1px solid rgba(255, 181, 128, 0.8);
            }
        }
    }
    .custom-preview-radio {
        .el-radio-button {
            &:not(:first-of-type) {
                .el-radio-button__inner {
                    border-left: 0 !important;
                }
            }
        }
        .el-radio-button__inner {
            background: #ffffff;
            border: 1px solid #eaeaea;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #969696;
        }
        .el-radio-button__original-radio:checked + .el-radio-button__inner {
            color: #ff6b00;
            font-weight: 500;
            border: 1px solid #ff6b00;
        }
    }
    .spread-footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 54px;
        border-top: 1px solid #eaeaea;
        padding: 0 24px;
    }

    .custom-img-error-box {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--el-fill-color-light);
        color: var(--el-text-color-placeholder);
    }
}
</style>
